webpack4+动态导入(按需加载方式)

#webpack4+动态导入(按需加载方式)| 来源: 网络整理| 查看: 265

此文为复习或升级webpack过程中的总结。webpack版本为4.29.5 webpack4+动态导入; 目的:减少包体积，按需加载。常见使用情况有以下3中 1：使用import()的情况 output: { filename: "bundle.js", chunkFilename: '[name].[hash:8].js', path: path.resolve(__dirname, "dist/js"), } 复制代码

动态导入时chunkFilename默认情况是数字，0,1....;当我们动态引入import("lodash")的时候；如果想要知道打包以后的文件是lodash而不是0.js,只需要在导入的时候加注释：这样打包的时候就会就会将注释中的webpackChunkName的值替换[name],具体详情参考文档：dynamic-imports

import(/* webpackPrefetch: true,webpackChunkName: "yourFileName",webpackPreload: true */ 'LoginModal') import ( /* webpackChunkName: "yourFileName" */ filePath); import ( /* webpackChunkName: "lodash" */ 'lodash').then(({ default: _ }) => { console.log(_) }).catch(error => 'An error occurred while loading the component'); 复制代码2：使用require.ensure(dependencies: String[], callback: function(require),errcallback:function(err), chunkName: String); //将A单独打包 require.ensure([],()=>{ require(A) },"bundleA")； //将A,B打包到一起，而且从主文件束中拆分出来。但只有 b.js 的内容被执行。a.js //的内容仅仅是可被使用，但并没有被输出。 //想去执行 a.js，我们需要异步地引用它，如 require(‘./a.js’)，让它的 JavaScritp 被执行。 require.ensure([A],()=>{ require(B) },bundleAB) 复制代码3：使用bundle-loader output配置 output: { filename: "js/[name].[hash:8].js", chunkFilename: 'js/[name].[hash:8].js', path: path.resolve(__dirname, "./dist"), // publicPath: "./" }, 复制代码当name:"[name]"时默认会将所有符合条件的文件单独打包，例如： webpack.module.rules配置如下 { test: /\.bundle(\.js|\.css)$/, use: { loader: "bundle-loader", options: { lazy: true, name: "[name]" } } } 复制代码index.js import bundle from './agg.bundle.js'; import bundle2 from '@/bgg.bundle.js'; 复制代码

会打包出来两个文件，文件名为文件名+此次打包的hash;

当name：string时 webpack.module.rules配置如下 { test: /\.bundle(\.js|\.css)$/, use: { loader: "bundle-loader", options: { lazy: true, name: "my-chunk" } } } 复制代码index.js import bundle from './agg.bundle.js'; import bundle2 from '@/bgg.bundle.js'; 复制代码

会将所有符合条件的文件打包成一个包，包名为my-chunk+此次打包的hash;

【本文地址】

公司简介

联系我们